<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>UC</title>
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1630532_vhi20rq6u5r.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/jq3.4.1.js"></script>

</head>

<body>
<div class="main-body">
    <header class="container-fluid">
        <div class="mainMaxWidth">
            <div class="mnuenItem">
                <div class="mnuenItem-left">
                    <div class="logo"><img src="../img/logo.png" alt=""></div>
                    <div class="text"><span class="fontdef">快捷发布</span></div>
                </div>
              
                <script src="http://uc.ecer.com/resadd/dist/js/ucNavBar.js"></script>
            </div>
           
        </div>
    </header>
    <section class="container-fluid">
        <div class="mainMaxWidth section" style=" display: flex;flex-direction: column;">
            <div class="section-header">
                <div class="text">
                    <span>产品管理</span>
                    <span>10</span>
                </div>
                <div class="new-pro cur">
                    <i class="iconfont icon-xinzeng"></i>
                    <span class="fontdef ">新增产品</span>
                </div>
            </div>
            <div class="section-main" style="flex: 1">
                <table style="border-collapse:separate; border-spacing:0px 10px;">
                    <thead>
                    <tr>
                        <th>排序</th>
                        <th>产品图片</th>
                        <th>产品名称</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="items">
                    <tr>
                        <td>
                            <div class="line"></div>
                            <div class="degger"></div>
                        </td>
                        <td>
                            <div class="product-img"><img src="../img/productImg.png" alt=""></div>
                        </td>
                        <td>
                            <div class="producr-info table-text"><a href="">Durable Insulation Refractory Ceramic Fiber
                                Blanket For V Neck Wedding111111111111111111111111111111111111111111111
                                Dresses</a>
                            </div>
                        </td>
                        <td class="table-text">2020-02-05 10:21:21</td>
                        <td>
                            <div class="menuid meun-btn cur">
                                <i style="color: #fff;font-size: 30px;" class="iconfont icon-more"></i>
                                <div class="showMenu">
                                    <div class="operation">
                                        <div class="edit item cur">
                                            <i class="iconfont icon-wanshanxinxi"></i>
                                            <span>编辑</span>
                                        </div>
                                        <div class="copy item cur">
                                            <i class="iconfont icon-fuzhi"></i>
                                            <span>复制</span>
                                        </div>
                                        <div class="del item cur">
                                            <i class="iconfont icon-shanchu"></i>
                                            <span>删除</span>
                                        </div>

                                    </div>

                                </div>

                            </div>


                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="line"></div>
                            <div class="degger"></div>
                        </td>
                        <td>
                            <div class="product-img"><img src="../img/productImg.png" alt=""></div>
                        </td>
                        <td>
                            <div class="producr-info table-text"><a href="">Durable Insulation Refractory Ceramic Fiber
                                Blanket For V Neck Wedding22222222222222222222222222222222222222222222
                                Dresses</a>
                            </div>
                        </td>
                        <td class="table-text">2020-02-05 10:21:21</td>
                        <td>
                            <div class="menuid meun-btn cur">
                                <i style="color: #fff;font-size: 30px;" class="iconfont icon-more"></i>
                                <div class="showMenu">
                                    <div class="operation">
                                        <div class="edit item cur">
                                            <i class="iconfont icon-wanshanxinxi"></i>
                                            <span>编辑</span>
                                        </div>
                                        <div class="copy item cur">
                                            <i class="iconfont icon-fuzhi"></i>
                                            <span>复制</span>
                                        </div>
                                        <div class="del item cur">
                                            <i class="iconfont icon-shanchu"></i>
                                            <span>删除</span>
                                        </div>

                                    </div>

                                </div>

                            </div>


                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="line"></div>
                            <div class="degger"></div>
                        </td>
                        <td>
                            <div class="product-img"><img src="../img/productImg.png" alt=""></div>
                        </td>
                        <td>
                            <div class="producr-info table-text"><a href="">Durable Insulation Refractory Ceramic Fiber
                                Blanket For V Neck 333333333333333333333333333333333
                                Dresses</a>
                            </div>
                        </td>
                        <td class="table-text">2020-02-05 10:21:21</td>
                        <td>
                            <div class="menuid meun-btn cur">
                                <i style="color: #fff;font-size: 30px;" class="iconfont icon-more"></i>
                                <div class="showMenu">
                                    <div class="operation">
                                        <div class="edit item cur">
                                            <i class="iconfont icon-wanshanxinxi"></i>
                                            <span>编辑</span>
                                        </div>
                                        <div class="copy item cur">
                                            <i class="iconfont icon-fuzhi"></i>
                                            <span>复制</span>
                                        </div>
                                        <div class="del item cur">
                                            <i class="iconfont icon-shanchu"></i>
                                            <span>删除</span>
                                        </div>

                                    </div>

                                </div>

                            </div>


                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="line"></div>
                            <div class="degger"></div>
                        </td>
                        <td>
                            <div class="product-img"><img src="../img/productImg.png" alt=""></div>
                        </td>
                        <td>
                            <div class="producr-info table-text"><a href="">Durable Insulation Refractory Ceramic Fiber
                                Blanket For V Neck 444444444444444444444
                                Dresses</a>
                            </div>
                        </td>
                        <td class="table-text">2020-02-05 10:21:21</td>
                        <td>
                            <div class="menuid meun-btn cur">
                                <i style="color: #fff;font-size: 30px;" class="iconfont icon-more"></i>
                                <div class="showMenu">
                                    <div class="operation">
                                        <div class="edit item cur">
                                            <i class="iconfont icon-wanshanxinxi"></i>
                                            <span>编辑</span>
                                        </div>
                                        <div class="copy item cur">
                                            <i class="iconfont icon-fuzhi"></i>
                                            <span>复制</span>
                                        </div>
                                        <div class="del item cur">
                                            <i class="iconfont icon-shanchu"></i>
                                            <span>删除</span>
                                        </div>

                                    </div>

                                </div>

                            </div>


                        </td>
                    </tr>
                    </tbody>

                </table>
            </div>

            <div class="pages">
                <div id="page" class="page_div"></div>
            </div>
            <div class="back cur"><span>返回</span></div>
        </div>
    </section>
    <div class="Modal" id="msgDel" style="display: none;">
    <div class="Modal-info">
        <div class="name fontdef">删除产品</div>
        <div class="setting">
            <!-- 改变名字-->
            <!--                <div class="setting-name">-->
            <!--                    <div>-->
            <!--                        <input id="name" type="text">-->
            <!--                        <span class="line"></span>-->
            <!--                    </div>-->
            <!--                    <span>.sale.ecer.com</span>-->
            <!--                </div>-->
            <!-- 提示信息-->
            <div class="info"><span>您确认要删除这个产品吗</span></div>
        </div>
        <div class="btntab">
            <div class="fontdef complete cur">完成</div>
            <div class="fontdef clear cur closeModal" >取消</div>
        </div>
    </div>
</div>
    <div class="Modal" id="msgCopy" style="display: none;">
        <div class="Modal-info">
            <div class="name fontdef">复制产品</div>
            <div class="setting">
                <!-- 改变名字-->
                <!--                <div class="setting-name">-->
                <!--                    <div>-->
                <!--                        <input id="name" type="text">-->
                <!--                        <span class="line"></span>-->
                <!--                    </div>-->
                <!--                    <span>.sale.ecer.com</span>-->
                <!--                </div>-->
                <!-- 提示信息-->
                <div class="info"><span>您确认要复制这个产品吗?</span></div>
            </div>
            <div class="btntab">
                <div class="fontdef complete cur">确定</div>
                <div class="fontdef clear cur closeModal">取消</div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/paging.js"></script>

<script>
    var el = document.getElementById('items');
    var arr = [];
    var sortable = new Sortable(el, {
        sort: true,
        delay: 0,
        handle:".degger",
        onUpdate: function (evt) {
            console.log(evt)
        },
    })

</script>